@extends('frontend::layout')

@section('title', '干预训练记录列表')

@section('content')
    <div class="card border-no">
        <div class="card-body">
                <div class="row">
                    <div class="clearfix"></div>
                    <div class="col-md-12 col-sm-12 col-xs-12">
{{--                        <label class="col-md-2 col-sm-12">
                            <input class="form-control" type="text" placeholder="姓名" name="child_name" value="{{ old("child_name") ?: (isset($query['child_name']) ? $query['child_name'] : '') }}" />
                        </label>--}}
                        <label class="col-md-2 col-sm-12">
                            <select class="form-control" id="child_id" name="child_id">
                                <option  value="">--{{__("Student")}}--</option>
                                @foreach($children as $child)
                                    <option value="{{ $child->id }}" @if(old('child_id') === $child->id || (old('user_id') === null && ($child_id ==  $child->id )) ) selected @endif >{{ $child->name }}</option>
                                @endforeach
                            </select>
                        </label>
                        <label class="col-md-2 col-sm-12">
                            <select class="form-control" id="category_id" name="category_id">
                                <option  value="">--{{__("category")}}--</option>
                                @foreach($categories as $k=>$val)
                                    <option value="{{ $k }}" @if(old('category_id') === $k || (old('category_id') === null && (isset($query['category_id']) && $query['category_id'] ==  $k )) ) selected @endif >{{ $val }}</option>
                                @endforeach
                            </select>
                        </label>

                    </div>
                </div>

                <div class="col-lg-12 col-sm-12 col-xs-12 chart">
                    <div class="info-box" id="container">
                        <canvas id="canvas"></canvas>
                    </div>
                </div>
        </div>
    </div>
@stop


@section('script')
    <script>
        function createConfig(labels, data, title) {
            console.log(data);
            return {
                type: 'horizontalBar',
                data: {
                    labels:labels,
                    datasets: data

                },
                options: {
                    responsive: true,
                    legend: {
                        position: 'top',
                    },
                    title: {
                        display: true,
                        text: title
                    },
                    maintainAspectRatio: false,

                    scales: {
                        xAxes: [{
                            position:'top',
                            gridLines:{
                                display: false
                            },
                            ticks: {
                                beginAtZero: true,
                                stepSize:1
                            }
                        }],
                        yAxes:[{
                            gridLines:{
                                display: false
                            }
                        }]
                    }

                }
            };
        }

        $("#document").ready(function (){
            changeData();

           $(".form-control").change(function (){
               changeData();
           })
        });
        //生成chart
        function changeData(){

            let url = "{{route("wechat.analysis.gettrainingdata")}}"

            let data = {"grade_id" : {{ $type }} }
            if ($("#child_id").val() > 0){
                data.child_id = $("#child_id").val()
            }
            if ($("#category_id").val() > 0){
                data.category_id = $("#category_id").val()
            }

            $.get(url,data,function (backData){
                if (backData.status == 200){
                    createChart(backData.data)
                }else {
                    console.log(backData);
                }
            })
        }
var chart
var num
        function createChart(result){
            $("#canvas").empty();

            var data = [];
            var thisdata = {};
            var faildata = {};

            thisdata.backgroundColor = window.chartColors["red"];
            thisdata.label = "成功次数";
            thisdata.data = result.successed;

            faildata.backgroundColor = window.chartColors["blue"];
            faildata.label = "失败次数";
            faildata.data = result.failed;

            data.push(thisdata);
            data.push(faildata);

            var thisconfig = createConfig(result.labels, data, "干预次数");
            num = thisdata.data.length;

            $('#canvas').remove();
            $('#container').append('<canvas id="canvas"></canvas>');

            if(num > 6){
                $("#canvas").css('height', num * 40);
            }

            var ctx = document.getElementById('canvas').getContext('2d');
            chart = new Chart(ctx, thisconfig);
        }


    </script>
@stop